
<template>
  <div class="songsTable" ref="songsTableRef">
    <list-table :topSongs='topSongs' @handleRowClick='handleRowClick' @handleDbClick='handleDbClick' @handleMoreClick='handleMoreClick' cover="/src/assets/img/topSongsLogo.png" :listId='paramsId'>
      <template #header>
        <div class="title">热门50首</div>
      </template>
    </list-table>
    <list-table :tableData='v' v-for="v in singerAlbum" :key='v.album.id' @handleRowClick='handleRowClick' @handleDbClick='handleDbClick' @handleMoreClick='handleMoreClick' :cover='`${v.album.blurPicUrl}?param=300y300`' :listId='v.album.id'>
      <template #header>
        <div class="title">{{v.album.name}}</div>
      </template>
    </list-table>
  </div>
</template>

<script>
import ListTable from '@/components/listTable/ListTable.vue'
import { ref } from 'vue'
import { useStore } from 'vuex'
let lastSingerInfo = {}
export default {
  name: 'songTable',
  components: { ListTable },
  props: {
    paramsId: {
      type: String,
      default: ''
    },
    topSongs: {
      type: Array,
      default() {
        return []
      }
    },
    singerAlbum: {
      type: Array,
      default() {
        return []
      }
    }
  },
  setup(p) {
    const songsTableRef = ref(null)
    const store = useStore()
    const state = store.state
    const handleDbClick = ({ id, index, listId }) => {
      if (listId != p.paramsId) {
        let micI = p.singerAlbum.findex(v => v.id === listId)
        if (micI !== -1) {
          store.commit('updateMusicId', id)
        }
        if (listId != state.musiclistId) {
          store.commit('updateMusciList', {
            musiclistId: listId,
            musiclist: p.singerAlbum[micI].songs
          })
        }
      } else {
        store.commit('updateMusicId', id)
        if (state.musiclistId != p.paramsId) {
          store.commit('updateMusciList', {
            musiclistId: p.paramsId,
            musiclist: p.topSongs.songs
          })
        }
      }
    }
    const handleDom = (id, listId, index) => {
      if (lastSingerInfo) {
        this.clearStyle(lastSingerInfo.i, lastSingerInfo.lastId)
      }
      let tables = document.querySelectAll('table')
      let i = -1
      let listIndex = -1
      if (listId == p.paramsId) {
        listIndex = 0
      } else {
        listIndex = p.singerAlbum.findIndex(v => v.id == listId)
        if (listIndex == -1) {
          return
        }
        listIndex += 1
      }
      if (index == null) {
        if (listIndex == 0) {
          i = p.topSongs.songs.findIndex(v => v.id == id)
        } else {
          i = this.singerAlbum[listIndex - 1].songs.findIndex(v => v.id == id)
        }
      } else {
        i = index
      }
      if (tables[lastIndex] && tables[lastIndex].children[i]) {
        let curRow = tables[listIndex].children[i]
        curRow.querySelect('.index').innerHTML = `<i class='iconfont icon-yinliang red '></i>`
        lastSingerInfo.i = i
        lastSingerInfo.listId = listId
        lastSingerInfo.singerId = p.paramsId
        store.commit('updateLastSingerInfo', lastSingerInfo)
      }
    }
    const clearStyle = (i, listId) => {
      let tables = document.querySelectAll('table')
      let listIndex = -1
      if (listId == p.paramsId) {
        listIndex = 0
      } else {
        listIndex = this.singerAlbum.findIndex(v => v.album.id == listId)
        if (listIndex == -1) {
          return
        }
        listIndex += 1
      }
    }
    const handleMoreClick = ({ listId }) => {
      router.push({ path: '/album', params: { id: listId } })
    }
    const handleRowClick = e => {
      const dom = songsTableRef.value.querySelector('.selectRow')
      if (dom) {
        dom.classList.remove('selectRow')
      }
      e.classList.add('selectRow')
    }
    return {
      songsTableRef,
      handleDbClick,
      handleRowClick,
      handleMoreClick
    }
  }
}
</script>

<style scoped>
.title {
  padding-left: 12px;
  font-size: 16px;
  font-weight: 600;
  color: black;
  margin-bottom: 10px;
}
.red {
  color: var(--red);
}
</style>